<template>
  <div>
    <div class="search-container">
            <div class="search-input">
                <el-input v-model="search" placeholder="收藏关系id"></el-input>
                <el-button type="primary" @click="searchFn">筛选</el-button>
            </div>

            
    </div>

    <template>
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
            >
                <el-table-column type="selection" width="55"> </el-table-column>

                <el-table-column label="ID" width="50">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                
                <el-table-column label="收藏人ID" width="300">
                    <template slot-scope="scope">{{ scope.row.post_col_id }}</template>
                </el-table-column>
                
                
                <el-table-column label="被收藏人id" width="300">
                    <template slot-scope="scope">{{
                        scope.row.get_col_id
                    }}</template>
                </el-table-column>
                 <el-table-column label="收藏关系状态" width="300">
                    <template slot-scope="scope">{{
                        scope.row.status
                    }}</template>
                </el-table-column>
                <el-table-column width="200">
                    <template slot-scope="scope">
                        <el-button type="success" @click="change_col(scope.row)"
                            >改变用户状态</el-button
                        >
                    </template>
                </el-table-column>   
                
            </el-table>
    </template>
  </div>
</template>

<script>
import axios from 'axios';
import { all_c } from "@/http/http";
export default {
    data() {
        return {
            tableData: [], // 表格数组
            page: 1, // 页数 第几页
            pageSize: 10, // 每页条数
            search: "", // 搜索值
            dialogVisible: false, // 是否显示模态框
            editInfo: {}, // 编辑用户信息
            total: 0, // 总数据条数  （分页器用的）
            news:0,
        }
    },
    methods: {
        searchFn() {
            // 根据搜索条件进行筛选
            this.getlist();
        },

        // 根据搜索条件进行筛选
        getlist() {
          if(this.search==''){
            // 获取列表全部数据
            all_c().then((res) => {
                this.tableData = res;
                this.total = res.length; // 表格数组
            });
              // 总数据条数
            console.log(this)
          }else{
            // 获取搜索数据
            axios.get(`http://127.0.0.1:2020/api/hsearch_col?id=${parseInt(this.search)}`)
            .then((res) => {
                this.tableData = res.data;// 表格数组
                this.total = res.data.length; // 总数据条数
            });
              
            console.log(this)
          } 
        },

        //改变用户状态
        change_col(item){
          var that= this;
          if(item.status==0){
            that.news=1;
            
          }
          else{
            that.news=0;
          }
          axios.get(`http://127.0.0.1:2020/api/hchange_col?id=${item.id}&status=${that.news}`)
          .then(res=>{
            if(res.code==200){
              that.getlist();
            }
          })
        },
    },
    created() {
        // 初始化调用
        this.getlist();
    },
}
</script>

<style scoped lang='less'>
.user {
    overflow: auto;
}
/* @import url(); 引入css类 */
.search-container {
    height: 66px;
    margin: 0 0 20px;
    padding: 0px 18px 0px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    .search-input {
        display: flex;
        align-items: center;
    }
    /deep/.el-input__inner {
        width: 263px;
        height: 30px;
        margin-right: 15px;
    }
}
.content .el-input {
    margin: 5px 0;
}
</style>